<template>
  <div class="byplus">
    <!-- 泊寓ING -->
    <van-nav-bar
      title="泊寓+"
      left-arrow
      @click-left="onClickLeft"
      class="bar"
    />
    <div
      @click="story(item.boyu_sid)"
      v-for="(item, index) of boyou_story"
      :key="index"
    >
      <div class="f_spim">
        <span v-html="item.boyu_stitle" class="by_span"></span>
        <img :src="item.boyu_simg" class="by_img" />
      </div>
      <div class="hr"><hr /></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      boyou_story: [],
    };
  },
  mounted() {
    this.axios.get("/byplus").then((res) => {
      this.boyou_story = res.data.results;
    });
  },
  methods: {
    onClickLeft() {
      this.$router.push("/faxian");
    },
    story(kw) {
      this.$router.push({
        path: "/storyplus",
        query: {
          sid: kw,
        },
      });
    },
  },
};
</script>
<style scoped>
.byplus {
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 30px;
  margin-top: 60px;
}
.bar {
  width: 100%;
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
}
.by_span {
  font-size: 15px;
  font-weight: 600;
  flex: 0 0 68%;
}
.f_spim {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.by_img {
  width: 80px;
  height:85px;
  flex: 0 0 27%;
  border-radius: 5px;
}
hr {
  border: 1px solid #aaa;
}
</style>